<template>
  <div class="pageContent">
    <div class="centerAll">
      <Table
        ref="xrTable"
        :list-api="list"
        :status-api="status"
        :batch-api="batch"
        :table-column="tableColumn"
        :page-config="pageConfig"
        :table-config="tableConfig"
        @openViewForm="openViewForm"
        @openEditForm="openEditForm">
        <template v-slot:addBtn>
          <el-button type="success" @click="openCreateForm()">新增</el-button>
        </template>
      </Table>
    </div>
  </div>

  <el-dialog v-model="dialogFormVisible" :title="isRead ? '查看' : '新增'" width="860px">
    <Form
      ref="xrForm"
      @remoteMethod="remoteMethod"
      @selectChangeFun="selectChangeFun"
      :table-column="tableColumn"
      :form-data="form"
      :is-read="isRead" />
    <template v-if="!isRead" #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">
          保存
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { tableColumn as tableColumns, pageConfig, tableConfig } from './config'
import Table from '/src/components/Table/index.vue'
import Form from '/src/components/Form/index.vue'
import {
  list,
  update,
  create,
  status,
  batch
} from '/src/api/pharmacy/subDrug'
import {
  ref,
  nextTick, onMounted, reactive
} from 'vue'
const dialogFormVisible = ref(false)
const isRead = ref(false)
const form = ref({
  status: 1
})
const xrForm = ref()
const xrTable = ref()
const tableColumn = reactive([...tableColumns])

const openCreateForm = () => {
  isRead.value = false
  dialogFormVisible.value = true

  nextTick(() => {
    form.value = { status: 1 }
    xrForm.value.ruleFormRef.resetFields()
    xrForm.value.ruleFormRef.clearValidate()
  })
}
const openViewForm = (row) => {
  isRead.value = true
  dialogFormVisible.value = true
  form.value = { ...row }
  nextTick(() => {
    xrForm.value.ruleFormRef.clearValidate()
  })
}
const openEditForm = (row) => {
  isRead.value = false
  dialogFormVisible.value = true
  form.value = { ...row }
  selectChangeFun(row.drug_type_id, {})
  nextTick(() => {
    xrForm.value.ruleFormRef.clearValidate()
    xrForm.value.buildFormSelData()
  })
}

const remoteMethod = async (query, f) => {
  for (const i in tableColumn) {
    if (tableColumn[i].prop === f.prop) {
      const options = f.selectRemoteOptions || {};
      options[f.selectRemoteKey] = query;
      const res = await f.asyncSelDataApi(options);
      f.asyncSelData = res.data
      tableColumn.splice(i, 1, f)
    }
  }
}

const selectChangeFun = (value, f) => {
  for (const i in tableColumn) {
    if (["drug_id", "alias", "alias_spelling", "pinyin_alias"].includes(tableColumn[i].prop)) {
      tableColumn[i].isForm = value <= 2
    }
  }
}

const submitForm = async () => {
  if (!xrForm.value.ruleFormRef) return
  await xrForm.value.ruleFormRef.validate(async (valid, fields) => {
    if (valid) {
      const options = {
        drug_type_id: form.value.drug_type_id,
        drugstore_id: form.value.drugstore_id,
        drug_id: form.value.drug_id,
        name: form.value.name,
        pinyin: form.value.pinyin,
        pinyin_abbr: form.value.pinyin_abbr,
        alias: form.value.alias,
        alias_pinyin: form.value.alias_pinyin,
        alias_abbr: form.value.alias_abbr,
        code: form.value.code,
        unit_id: form.value.unit_id,
        drug_spec_id: form.value.drug_spec_id,
        sup_price: form.value.sup_price,
        sale_price: form.value.sale_price,
        produce_merchant: form.value.produce_merchant,
        max_use: form.value.max_use,
        min_use: form.value.min_use,
        max_unit_id: form.value.max_unit_id,
        min_unit_id: form.value.min_unit_id,
        is_unit_break: form.value.is_unit_break,
        switch_number: form.value.switch_number,
        remark: form.value.remark,
        id: form.value.id
      }

      if (options.is_unit_break === true) {
        options.is_unit_break = 1
      } else if (options.is_unit_break === false) {
        options.is_unit_break = 0
      }
      if (options.id) {
        await update(options)
      } else {
        await create(options)
      }
      dialogFormVisible.value = false
      xrTable.value.resetFormParent()
      await buildFormSelData();
    } else {
      console.log('error submit!', fields)
    }
  })
}

const buildFormSelData = async () => {
  for (const column of tableColumn.filter(item=>item.isForm)) {
    if (column.asyncSelDataApi) {
      const res = await column.asyncSelDataApi();
      column.asyncSelData = res.data;
    }
    if (column.children) {
      for (const childrenColumn of column.children) {
        if (childrenColumn.asyncSelDataApi) {
          const res = await childrenColumn.asyncSelDataApi();
          childrenColumn.asyncSelData = res.data;
        }
      }
    }
  }
}

onMounted(async () => {
  await buildFormSelData();
})
</script>

<style lang="scss" scoped>
</style>
